<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <a-form-model ref="form" :model="mdl" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-row>
                        <a-col :span="24">
                            <a-form-model-item :label="i18n('form.service','所属服务')" prop="service" :label-col="labelCol1" :wrapper-col="wrapperCol1">
                                <a-radio-group v-model="mdl.service" :options="appServices"></a-radio-group>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-model-item :label="i18n('form.apiName','接口名称')" prop="apiName">
                                <a-input :placeholder="i18n('form.apiName','接口名称','input')" v-model="mdl.apiName" style="width: 80%"/>
                                <a-button style="margin: 2px;" shape="circle" icon="search" @click="openInterface"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">

                            <a-form-model-item :label="i18n('form.method','请求方法')" prop="method">
                                <a-select :placeholder="i18n('form.method','请求方法','select')" v-model="mdl.method" :getPopupContainer="p=>p.parentNode">
                                    <a-select-option value="POST">POST</a-select-option>
                                    <a-select-option value="GET">GET</a-select-option>
                                    <a-select-option value="PUT">PUT</a-select-option>
                                    <a-select-option value="DELETE">DELETE</a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-model-item :label="'分类'" prop="categoryId">
                                <rx-category-select cat-key="EXTERNAL_API" :isGrant="true" v-model="mdl.categoryId"  style="width: 80%;"></rx-category-select>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="24">
                            <a-form-model-item :label="i18n('form.path','路径')" prop="path" :label-col="labelCol1" :wrapper-col="wrapperCol1">
                                <a-input :placeholder="i18n('form.path','路径','input')" v-model.trim="mdl.path"/>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="24">
                            <a-form-model-item :label="i18n('form.headers','请求头')" prop="headers" :label-col="labelCol1" :wrapper-col="wrapperCol1">
                                <div style="text-align: right;">
                                    <a-button style="margin-right: 5px;" @click="addHeader"> <a-icon type="plus" /></a-button>
                                    <a-button  @click="delHeader"><a-icon type="minus" /></a-button>
                                </div>
                                <rx-grid
                                    style="min-height:200px;"
                                    :bordered="true"
                                    ref="headersTable"
                                    :dataSource="headersData"
                                    :allowRowSelect="true"
                                    :multiSelect="true"
                                    :showPage="false"
                                    :columns="columns"
                                >
                                    <span slot="headerName" slot-scope="{ text, record }">
                                        <a-input :placeholder="i18n('form.paramName','参数名称','input')" v-model.trim="record.headerName"/>
                                    </span>
                                    <span slot="headerDesc" slot-scope="{ text, record }">
                                        <a-input :placeholder="i18n('form.paramDesc','参数说明','input')" v-model="record.headerDesc"/>
                                    </span>
                                    <span slot="paraType" slot-scope="{ text, record }">
                                          <a-auto-complete
                                              :placeholder="i18n('form.paramType','参数类型','select')"
                                              v-model="record.paraType"
                                              allowClear
                                              :data-source="paraTypes"
                                              :filter-option="filterOption">
                                        </a-auto-complete>
                                    </span>
                                    <span slot="required" slot-scope="{ text, record }">
                                        <a-input :placeholder="i18n('form.necessity','必要性','input')" v-model="record.required"/>
                                    </span>
                                </rx-grid>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="24">
                            <a-form-model-item :label="i18n('form.params','参数')" prop="params"  :label-col="labelCol1" :wrapper-col="wrapperCol1">
                                <div style="text-align: right;">
                                    <a-button style="margin-right: 5px;" @click="addParam"> <a-icon type="plus" /></a-button>
                                    <a-button  @click="delParam"><a-icon type="minus" /></a-button>
                                </div>
                                <rx-grid
                                    style="min-height:200px;"
                                    :bordered="true"
                                    ref="paramsTable"
                                    :dataSource="paramsData"
                                    :allowRowSelect="true"
                                    :multiSelect="true"
                                    :showPage="false"
                                    :columns="columns"
                                >
                                     <span slot="headerName" slot-scope="{ text, record }">
                                        <a-input :placeholder="i18n('form.paramName','参数名称','input')" v-model.trim="record.headerName"/>
                                    </span>
                                    <span slot="headerDesc" slot-scope="{ text, record }">
                                        <a-input :placeholder="i18n('form.paramDesc','参数说明','input')" v-model="record.headerDesc"/>
                                    </span>
                                    <span slot="paraType" slot-scope="{ text, record }">
                                          <a-auto-complete
                                              :placeholder="i18n('form.paramType','参数类型','select')"
                                              v-model="record.paraType"
                                              allowClear
                                              :data-source="paraTypes"
                                              :filter-option="filterOption">
                                        </a-auto-complete>
                                    </span>
                                    <span slot="required" slot-scope="{ text, record }">
                                        <a-input :placeholder="i18n('form.necessity','必要性','input')" v-model="record.required"/>
                                    </span>
                                </rx-grid>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="24">
                            <a-form-model-item :label="i18n('form.body','请求体')" prop="body" :label-col="labelCol1" :wrapper-col="wrapperCol1">
                                <a-textarea v-model="mdl.body" :rows="8"></a-textarea>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                </a-form-model>
            </div>
        </rx-layout>
    </rx-dialog>
</template>
<script>
import SysExternalApiApi from '@/api/system/core/sysExternalApi'
import {RxDialog, BaseFormModel, Util} from "@lowcode/jpaas-common-lib";
import PublicApi from "@/api/form/core/public";
import SysInterface from "@/views/modules/system/core/SysInterface";

export default {
    name: 'SysExternalApiEdit',
    mixins: [BaseFormModel],
    components: {
        RxDialog,
    },
    data() {
        return {
            /**
             * 子表列表，以及表格属性
             */
            subTable: {},
            rules: {
                apiName: [{required: true, message: this.i18n('form.apiName','请输入API接口名称','input'), trigger: 'change'}],
                body: [{required: false, message: this.i18n('form.body','请输入请求体','input'), trigger: 'change'}],
                headers: [{required: false, message: this.i18n('form.headers','请输入请求头','input'), trigger: 'change'}],
                method: [{required: true, message: this.i18n('form.method','请选择请求方法','select'), trigger: 'change'}],
                params: [{required: false, message: this.i18n('form.params','请输入请求参数','input'), trigger: 'change'}],
                path: [{required: true, message: this.i18n('form.path','请输入路径','input'), trigger: 'change'}],
                service: [{required: true, message: this.i18n('form.service','请选择所属服务','select'), trigger: 'change'}],
                type: [{required: false, message: this.i18n('form.type','请输入类型','select'), trigger: 'change'}],
                categoryId: [{required: true, message: this.i18n('form.category','分类','select'), trigger: 'change'}],
            },
            columns: [
                { title: this.$ti18('rxList.index','序号'), scopedSlots: { customRender: 'serial' },dataIndex: 'serial',type:'indexColumn', width: '5%' },
                {title: this.i18n('form.paramName','参数名称'), dataIndex: 'headerName', width:100,scopedSlots: { customRender: 'headerName' }},
                {title: this.i18n('form.paramDesc','参数说明'), dataIndex: 'headerDesc', width:150,scopedSlots: { customRender: 'headerDesc' }},
                {title: this.i18n('form.paramType','参数类型'), dataIndex: 'paraType', width:100,scopedSlots: { customRender: 'paraType' }},
                {title: this.i18n('form.necessity','必要性'), dataIndex: 'required', width:150,scopedSlots: { customRender: 'required' }}
            ],
            //服务列表
            appServices:[],
            headersData:[],
            paramsData:[],
            paraTypes:["String","int","boolean"]
        }

    },
    created() {
        this.getAppServices();
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"SysExternalApi",key);
        },
        onload_(values){
            if(values){
                this.headersData=values.headers?JSON.parse(values.headers):[];
                this.paramsData=values.params?JSON.parse(values.params):[];
            }
        },
        get(id) {
            return SysExternalApiApi.get(id);
        },
        save() {
            if(!this.mdl.type){
                //this.mdl.type="default";
                this.mdl.type="custom";
            }
            this.mdl.headers=JSON.stringify(this.headersData);
            this.mdl.params=JSON.stringify(this.paramsData);
            return SysExternalApiApi.save(this.mdl);
        },
        getAppServices(){
            var self=this;
            PublicApi.getAppServices().then(res=>{
                if(res && res.length>0){
                    self.appServices=[];
                    for (let i = 0; i < res.length; i++) {
                        self.appServices.push({
                            value:res[i],
                            label:res[i]
                        })
                    }
                }
            });
        },
        addHeader(){
            this.headersData.push({
                headerName:"",
                headerDesc:"",
                paraType:"",
                required:"",
            })
        },
        delHeader(){
            this.$refs.headersTable.removeRows();
        },
        addParam(){
            this.paramsData.push({
                headerName:"",
                headerDesc:"",
                paraType:"",
                required:"",
            })
        },
        delParam(){
            this.$refs.paramsTable.removeRows();
        },
        //参数类型筛选
        filterOption(input, option) {
            return (
                option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
            );
        },
        openInterface() {
            var self = this;
            var conf = {
                component: SysInterface,
                title: this.i18n('form.selectApi','选择接口'),
                data: {
                    mutilple: 0,
                    selectable:true
                },
                curVm: self,
                widthHeight: ['600px', '700px']
            };
            Util.open(conf, function (action,data) {
                if (action != 'ok') {
                    return;
                }
                var params=[];
                if(data.para && data.para.length>0){
                    for (let i = 0; i < data.para.length; i++) {
                        var paraTypes = data.para[i].paraType.split('.');
                        var param={
                            headerName:data.para[i].paraName,
                            headerDesc:data.para[i].paraDesc,
                            paraType:paraTypes[paraTypes.length-1],
                            required:self.i18n('form.yes','是'),
                        }
                        params.push(param);
                    }
                }
                var ary = data.url.split('/');
                var url="/api/api-"+ary[1] +data.url;
                var obj={
                    apiName: data.apiName,
                    method: data.methodType,
                    path: url,
                    service: data.service,
                }
                self.$set(self,"mdl",obj);
                self.$set(self,"paramsData",params);
            });
        },

    }
}
</script>
<style>
.relick a {
    margin-right: 10px;
}

</style>
